<template>
	<view id="box_app">
		<!-- 昵称 手机号 -->
		<view class="app_message">
			<view class="app_img" src="">

			</view>
			<view class="app_text">
				<text class="app_login">{{name}}</text>
				<view>
					<text bindtap>{{phone}}</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>

			</view>

		</view>

		<view class="app_integral">
			<view class="app_num">
				<text @click="fn">{{num}}</text>
				<text>积分</text>
			</view>
			<view class="app_num">
				<text>{{sale}}</text>
				<text>优惠券</text>
			</view>
			<view class="app_num">
				<text>{{collect}}</text>
				<text>收藏</text>
			</view>
			<view class="app_num">
				<text class="iconfont icon-huangguan"></text>
				<text class="app_color">lv{{grade}}</text>
			</view>
		</view>

		<!-- 我的课程 -->
		<view class="app_course">
			<text class="app_my">我的课程</text>
			<uni-card :isFull="true" style="padding: 0;margin-top: 20rpx;">
				<view class="app_card">
					<view class="app_nume">
						<text class="iconfont icon-qianbao tb"></text>
						<text>{{unpaid}}</text>
					</view>
					<view class="app_nume">
						<text class="iconfont icon-shuben tb"></text>
						<text>{{study}}</text>
					</view>
					<view class="app_nume">
						<text class="iconfont icon-biaoqian tb"></text>
						<text>{{over}}</text>
					</view>
					<view class="app_nume">
						<text class="iconfont icon-jianli tb"></text>
						<text>{{all}}</text>
					</view>
				</view>
			</uni-card>
		</view>

		<!-- 我的活动 -->
		<view class="app_activity">
			<view>
				<view class="app_icon app_one">
					<text class="iconfont icon-jingdiananli_wujiaoxing_shoucanghou">我的活动</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>

			</view>

			<view class="app_icon">
				<text class="iconfont icon-xiaoxi">我的消息</text>
				<text class="iconfont icon-youjiantou"></text>
			</view>

			<view class="app_icon">
				<text class="iconfont icon-yaoqingjiangli">邀请有奖</text>
				<text class="iconfont icon-youjiantou"></text>
			</view>

			<view class="app_icon">
				<text class="iconfont icon-wode">关于我们</text>
				<text class="iconfont icon-youjiantou"></text>

			</view>

			<view class="app_icon">
				<text class="iconfont icon-bangdingpingtai">绑定手机</text>
				<text class="iconfont icon-youjiantou"></text>
			</view>
		</view>



	</view>
</template>

<script lang="ts">
	import {
		ref
	} from 'vue'
	export default {
		setup() {
			let name = ref('小小少年');
			let phone = ref('注册成为会员')
			let num = ref(0);
			let sale = ref(0);
			let collect = ref(0);
			let grade = ref(7);
			let unpaid = ref('待支付');
			let study = ref('学习中');
			let over = ref('已结束');
			let all = ref('全部')
			let fn = () => {
				num.value++
				console.log(fn)
			}
			return {
				name,
				phone,
				num,
				sale,
				collect,
				grade,
				unpaid,
				study,
				fn,
				over,
				all
			}
		}
	}
</script>

<style lang="less">
	@import url('../../static/my-iconfont/iconfont.css');

	#box_app {
		padding: 32rpx;



		// 登录 注册
		.app_message {
			display: flex;
			// border: 1px solid black;
			height: 193rpx;

			.app_img {
				width: 140rpx;
				height: 140rpx;
				line-height: 140rpx;
				border: 1px solid black;
				border-radius: 140rpx;

				image {
					width: 150rpx;
					height: 200rpx;
					vertical-align: middle;

				}
			}

			.app_login {
				// margin-left: 20rpx;
				font-weight: 900;
				font-size: 40rpx;
				margin-top: 10rpx;
			}

			.app_text {
				line-height: 80rpx;
				padding-left: 20rpx;

			}



		}

		// 2
		.app_integral {
			// border: 1px solid pink;
			display: flex;
			justify-content: space-between;

			.app_num {
				height: 90rpx;

				.app_color {
					width: 60rpx;
					background: rebeccapurple;
					margin-top: 20rpx;
				}

				text {
					display: block;
					text-align: center;
					font-size: 30rpx;
					margin-top: 10rpx;

				}
			}
		}

		// 我的课程
		.app_course {
			margin-top: 40rpx;
			padding: 10rpx 0;


			.app_card {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;


				.app_nume {
					height: 90rpx;

					.tb {
						color: black;
						font-size: 60rpx;
					}

					text {
						padding: 0;
						display: block;
						text-align: center;
					}
				}

			}

			.app_my {
				display: block;
				font-size: 30rpx;
				font-weight: 900;
				margin-bottom: 20rpx;

			}
		}

		// 我的活动
		.app_activity {
			.app_one {
				margin-top: 20rpx;
			}

			.app_icon {
				display: flex;
				justify-content: space-between;

				text {
					margin: 25rpx 0;
				}



			}

		}
	}
</style>
